<template>
  <div class="audition12">
    <p>Promise相当于异步操作结果的占位符，它接收一个异步操作生成一个promise对象</p>
    <p>比如</p>
    <code class="code">
      let promise = axios(url, 'get')
    </code>
    <h3>promise有三种状态：</h3>
    <p>
      <span class="indient">1. <span class="color">pending</span>: 当接收一个异步操作生成一个promise对象时，处于挂起状态，当前的promise尚未处理。显示结果为undefined</span><br />
      <code class="code">
        let promise = new Promise(function(resolve, reject) {})<br />
		    console.log(promise)
      </code><br />
      <span class="indient">打开控制台，查看打印结果：</span><br />
      <img src="@images/promise1.png" alt="" class="img"><br />
      <span>-----------------------------------------------</span><br />
      <span class="indient">2. <span class="color">fulfilled</span>: 当promise异步操作成功完成时，处于fulfilled状态</span><br />
      <code class="code">
        let promise = new Promise(function(resolve, reject) {<br />
          <span class="indient">resolve(111)</span><br />
        })<br />
        promise.then(val => console.log(val))<br />
        console.log(promise)
      </code><br />
      <span class="indient">打开控制台，查看打印结果：</span><br />
      <img src="@images/promise2.png" alt="" class="img"><br />
      <span>-----------------------------------------------</span><br />
      <span class="indient">3. <span class="color">rejected</span>: promise异步操作失败，此时结果是失败信息</span><br />
      <code class="code">
        let promise = new Promise(function(resolve, reject) {<br />
          <span class="indient">reject('fail')</span><br />
        })<br />
        promise.catch(err => console.error(err))<br />
        console.log(promise)
      </code><br />
      <span class="indient">打开控制台，查看打印结果：</span><br />
      <img src="@images/promise3.png" alt="" class="img">
    </p>
    <p>这三种状态，promise只会同时处于其中一种状态</p>
    <hr>
    <h3>promise的then和catch方法</h3>
    <p>由上面的示例可知，promise的状态结果是用内部属性<span class="color">PromiseState</span>来表示的</p>
    <p>但是这个属性并不会暴露在promise对象上，比如</p>
    <code class="code">
      console.log(promise.PromiseState)
    </code>
    <p>得到的结果是：<span class="color">undefined</span></p>
    <p>所以，当状态变化时，我们就要借助<span class="color">then()</span>方法来处理</p>
    <p>then方法接收<span class="color">两个</span>参数，第一个是异步操作<span class="color">成功的函数</span>，第二个是异步操作<span class="color">失败的函数</span>，这两个参数<span class="color">都是可选</span>的</p>
    <p>例如：</p>
    <code class="code">
      let promise = new Promise(function(resolve, reject) {})<br />
      promise.then(<br />
        <span class="indient">// 成功完成时</span><br />
        <span class="indient">data => console.log(data),</span><br />
        <span class="indient">// 失败时</span><br />
        <span class="indient">err => console.error(err)</span><br />
      )
    </code>
    <p>当然，promise还有一个catch方法，它和then方法的失败时执行是等价的</p>
    <p>比如：</p>
    <code class="code">
      let promise = new Promise(function(resolve, reject) {})<br />
      promise.catch(err => console.log(err))<br />
      <br />
      <span>// 它等价于：</span><br />
      <br />
      promise.then(null, err => console.log(err))
    </code>
    <p>为了更清晰的了解当前任务的执行情况，我们一般同时使用then和catch方法</p>
    <p>用then处理成功完成任务时的数据，用catch处理执行失败时的数据</p>
    <hr>
    <h3>promise实现第1s打印1，第2秒打印2...</h3>
    <v-md-preview :text="text1" />
  </div>
</template>

<script>
const prefix = '``` js'
const suffix = '```'
export default {
  name: 'Audition12',
  data() {
    return {
      text1: `${prefix}
        function delayPrint(num) {
          return new Promise((resolve, reject) => {
            console.log(num)
            setTimeout(resolve, 1000)
          })
        }
        delayPrint(1)
          .then(() => delayPrint(2))
          .then(() => delayPrint(3))
          .then(() => delayPrint(4))
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>